<template>
  <div class="Meteorological">
    <!-- 返回 -->
    <div class="Return">
      <i class="el-icon-arrow-left" @click="SignOut"></i>
    </div>
    <div class="banner">
      <!-- 头部 -->
      <div class="headTitle flex-space-around">
        <pageSelect :NameOfDevice="sensorName" :arrayList="sensorList" @jump="SelectSensor"></pageSelect>
        <pageBorder :titleName="systemName"></pageBorder>
        <pageBorder></pageBorder>
      </div>
      <!-- 中间 -->
      <div class="middle flex-between">
        <!-- 天气 -->
        <div class="weather">
          <div>
            <pageTitle>
              <span slot="left">今日天气</span>
              <span slot="center">|</span>
              <span slot="right">传感器位置</span>
            </pageTitle>
          </div>
          <div class="LocationWeather">
            <div>
              <LocationWeather :realTimeWeather="realTimeWeather"></LocationWeather>
            </div>
          </div>
        </div>
        <div class="maps">
          <maps :sensorArr="sensorArr" :OffLine="OffLine" :OLine="OLine"></maps>
        </div>
        <!-- 温湿度 -->
        <div>
          <div>
            <pageTitle>
              <span slot="left">湿度统计</span>
              <span slot="center">|</span>
              <span slot="right">温度统计</span>
            </pageTitle>
          </div>
          <div class="pageBrokenLine">
            <pageBrokenLine
              @Tab="Tab"
              :Time="tempHumTime"
              :HumidityData="HumidityData"
              :tempData="tempData"
              :Day="Day"
              :Month="Month"
              chartsH="517px"
            ></pageBrokenLine>
          </div>
        </div>
        <!-- 大气压 -->
      </div>
      <!-- 尾部 -->
      <div class="footer flex-between">
        <div>
          <pageTitle>
            <span slot="left">风速统计</span>
            <span slot="center">|</span>
            <span slot="right">风向统计</span>
          </pageTitle>
          <div class="wind">
            <pageSolt>
              <div>
                <pageWind :windData="windData" @windTab="windTab" :Day="windDay" :Month="windMonth"></pageWind>
              </div>
            </pageSolt>
          </div>
        </div>
        <div>
          <pageTitle>
            <span slot="left">PM值统计</span>
          </pageTitle>
          <div class="wind">
            <pageSolt>
              <div>
                <lines
                  names="μg/m3"
                  :Time="pmTime"
                  :Data="pmData"
                  :Day="pmDay"
                  :Month="pmMonth"
                  @Tab="pmTab"
                ></lines>
              </div>
            </pageSolt>
          </div>
        </div>
        <div>
          <pageTitle>
            <span slot="left">大气压强统计</span>
          </pageTitle>
          <div class="wind">
            <pageSolt>
              <div>
                <pageHistogram
                  :pressureTime="pressureTime"
                  :pressureData="pressureData"
                  @pressureTab="pressureTab"
                  :Day="pressureDay"
                  :Month="ressureMonth"
                ></pageHistogram>
              </div>
            </pageSolt>
          </div>
        </div>
        <div>
          <pageTitle>
            <span slot="left">噪音</span>
          </pageTitle>
          <div class="wind">
            <pageSolt>
              <div>
                <lines
                  :Time="noiseTime"
                  :Data="noiseData"
                  :Day="noiseDay"
                  :Month="noiseMonth"
                  @Tab="noiseTab"
                  names="dB"
                ></lines>
              </div>
            </pageSolt>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import pageBorder from "../components/pageS/pageBorder";
import pageSelect from "../components/pageS/pageSelect";
import pageTitle from "../components/pageS/pageTitle";
import LocationWeather from "../components/pageS/LocationWeather";
import pageBrokenLine from "../components/pageS/pageBrokenLine";
import pageHistogram from "../components/pageS/pageHistogram";
import pageSolt from "../components/pageS/pageSolt";
import pageRealTime from "../components/pageS/pageRealTime";
import lines from "../components/pageS/line";

import pageWind from "../components/pageS/pageWind";
import MOffLine from "@/assets/image/map/MOffLine.png";
import MOLine from "@/assets/image/map/MOLine.png";
import echarts from "echarts";
import maps from "../components/pageS/pageMap";
import tempImg from "../assets/image/qx/temperature.png";
import humidityImg from "../assets/image/qx/humidity.png";
import windImg from "../assets/image/qx/wind.png";
import pressureImg from "../assets/image/qx/pressure.png";
export default {
  props: ["systemName"],
  components: {
    maps,
    pageBorder,
    pageSelect,
    pageTitle,
    LocationWeather,
    pageBrokenLine,
    pageHistogram,
    pageSolt,
    pageRealTime,
    pageWind,
    lines
  },
  data() {
    return {
      OffLine: MOffLine,
      OLine: MOLine,
      sensorList: [],
      id: "",
      SpecificDate: "", //当天时间
      CurrentMont: "", //当月时间
      timeType: 0,
      tempHumTime: [],
      HumidityData: [],
      tempData: [],
      Day: true,
      Month: false,
      pressureDay: true,
      ressureMonth: false,
      windDay: true,
      windMonth: false,
      sensorArr: [], //钉子位置
      pressureTime: [], //气压时间
      pressureData: [], //气压数据
      pmTime: [],
      pmData: [],
      pmDay: true,
      pmMonth: false,
      noiseTime: [],
      noiseData: [],
      noiseDay: true,
      noiseMonth: false,
      realTimeNoise: {},
      normal: {},
      pollution: {},
      realTimeWind: {},
      windData: [],
      realTimeWeather: {},
      timer: "",
      tempRealTime: {
        tips: "实时温度",
        imgPath: tempImg,
        Company: "°C"
      },
      humidityRealTime: {
        tips: "实时湿度",
        imgPath: humidityImg,
        Company: "%"
      },
      windRealTime: {
        tips: "实时风速",
        imgPath: windImg,
        Company: "m/s"
      },
      pressureRealTime: {
        tips: "大气压强",
        imgPath: pressureImg,
        Company: "hpa"
      }
    };
  },
  created() {
    this.current();
    this.sensorGet();
  },
  mounted() {
    this.steTime();
  },
  methods: {
    // 返回
    SignOut() {
      this.$router.push("/steward");
    },
    // 风速风向日月切换
    windTab(e) {
      if (e == 0) {
        this.SpecificDate = this.CurrentDay;
        this.timeType = 0;
      } else {
        this.SpecificDate = this.CurrentMont;
        this.timeType = 1;
      }
      this.wind();
    },
    // 温度湿度月日切换
    Tab(e) {
      if (e == 0) {
        this.SpecificDate = this.CurrentDay;
        this.timeType = 0;
      } else {
        this.SpecificDate = this.CurrentMont;
        this.timeType = 1;
      }
      this.TemperatureAndHumidityH();
    },
    // 大气压日月切换
    pressureTab(e) {
      if (e == 0) {
        this.SpecificDate = this.CurrentDay;
        this.timeType = 0;
      } else {
        this.SpecificDate = this.CurrentMont;
        this.timeType = 1;
      }
      this.pressure();
    },
    pmTab(e) {
      if (e == 0) {
        this.SpecificDate = this.CurrentDay;
        this.timeType = 0;
      } else {
        this.SpecificDate = this.CurrentMont;
        this.timeType = 1;
      }
      this.PM();
    },
    noiseTab(e) {
      if (e == 0) {
        this.SpecificDate = this.CurrentDay;
        this.timeType = 0;
      } else {
        this.SpecificDate = this.CurrentMont;
        this.timeType = 1;
      }
      this.noise();
    },
    // 获取所有传感器
    sensorGet() {
      this.sensor().then(res => {
        if (res.data.data.length > 0) {
          this.sensorName = res.data.data[0];
          this.id = res.data.data[0].id;
          this.sensorList = res.data.data;
          this.TemperatureAndHumidityH();
          this.pressure();
          this.realTimeData();
          this.wind();
          this.PM();
          this.noise();
          this.weather();
          this.GETsensor();
        }
      });
    },
    //  传感器切换
    SelectSensor(e) {
      this.timeType = 0;
      this.SpecificDate = this.CurrentDay;
      this.id = e.id;
      this.sensorName = e;
      this.PM();
      this.noise();
      this.TemperatureAndHumidityH();
      this.pressure();
      this.realTimeData();
      this.wind();
      this.weather();
      this.GETsensor();
    },
    // 大气压请求
    pressure() {
      let params1 = {
        params: {
          start: this.SpecificDate,
          // 0是天  1按月的
          timeType: this.timeType,
          dataType: 2
        }
      };
      this.sensor("/" + this.id, params1).then(res => {
        let aggregateData = res.data.data;
        let index = this.timeType;
        index == 0 ? (index = 1) : (index = 0);
        if (aggregateData) {
          this.pressureTime = this.timeTool(aggregateData, index);
          this.pressureData = this.dataTool(aggregateData, "pressure");
        } else {
          this.pressureTime = [];
          this.pressureData = [];
        }
        if (index == 0) {
          this.pressureDay = false;
          this.ressureMonth = true;
        } else {
          this.pressureDay = true;
          this.ressureMonth = false;
        }
      });
    },
    // 温湿度请求
    TemperatureAndHumidityH() {
      let params1 = {
        params: {
          start: this.SpecificDate,
          // 0是天  1按月的
          timeType: this.timeType,
          dataType: 0
        }
      };
      this.sensor("/" + this.id, params1).then(res => {
        let aggregateData = res.data.data;
        let index = this.timeType;
        index == 0 ? (index = 1) : (index = 0);
        if (aggregateData) {
          this.tempHumTime = this.timeTool(aggregateData, index);
          this.HumidityData = this.dataTool(aggregateData, "humidity");
          this.tempData = this.dataTool(aggregateData, "temp");
        } else {
          this.tempHumTime = [];
          this.HumidityData = [];
          this.tempData = [];
        }

        if (index == 0) {
          this.Day = false;
          this.Month = true;
        } else {
          this.Day = true;
          this.Month = false;
        }
      });
    },
    // 风速请求
    wind() {
      let params1 = {
        params: {
          start: this.SpecificDate,
          // 0是天  1按月的
          timeType: this.timeType,
          dataType: 1
        }
      };
      this.sensor("/" + this.id, params1).then(res => {
        let aggregateData = res.data.data;
        let index = this.timeType;
        index == 0 ? (index = 1) : (index = 0);
        if (aggregateData) {
          var wind = aggregateData.map(item => {
            if (item.medWD <= 3) {
              item.medWD = "N";
            } else if (item.medWD < 77) {
              item.medWD = "NE";
            } else if (item.medWD <= 93) {
              item.medWD = "E";
            } else if (item.medWD < 173) {
              item.medWD = "SE";
            } else if (item.medWD <= 183) {
              item.medWD = "S";
            } else if (item.medWD < 267) {
              item.medWD = "SW";
            } else if (item.medWD <= 312) {
              item.medWD = "W";
            } else if (item.medWD < 357) {
              item.medWD = "WN";
            } else if (item.medWD >= 360) {
              item.medWD = "N";
            }
            return item;
          });
          this.windData = wind;
        } else {
          this.windData = [];
        }
        if (index == 0) {
          this.windDay = false;
          this.windMonth = true;
        } else {
          this.windDay = true;
          this.windMonth = false;
        }
      });
    },
    PM() {
      let params1 = {
        params: {
          start: this.SpecificDate,
          // 0是天  1按月的
          timeType: this.timeType,
          dataType: 3
        }
      };
      this.sensor("/" + this.id, params1).then(res => {
        if (res.data.data) {
          let aggregateData = res.data.data;
          let index = this.timeType;
          index == 0 ? (index = 1) : (index = 0);
          this.pmTime = this.timeTool(aggregateData, index);
          this.pmData = this.dataTool(aggregateData, "pm25");
          if (index == 0) {
            this.pmDay = false;
            this.pmMonth = true;
          } else {
            this.pmDay = true;
            this.pmMonth = false;
          }
        }
      });
    },

    noise() {
      let params1 = {
        params: {
          start: this.SpecificDate,
          // 0是天  1按月的
          timeType: this.timeType,
          dataType: 4
        }
      };

      this.sensor("/" + this.id, params1).then(res => {
        let aggregateData = res.data.data;
        let index = this.timeType;
        index == 0 ? (index = 1) : (index = 0);
        this.noiseTime = this.timeTool(aggregateData, index);
        this.noiseData = this.dataTool(aggregateData, "medNos");
        console.log(this.noiseData);
        console.log(this.noiseTime);

        if (index == 0) {
          this.noiseDay = false;
          this.noiseMonth = true;
        } else {
          this.noiseDay = true;
          this.noiseMonth = false;
        }
      });
    },
    // 钉子所在位置
    GETsensor(e) {
      this.$http
        .get("/api/threesuns/stat/sensors/weather/location/" + this.id)
        .then(res => {
          if (res.data.data) {
            this.sensorArr = [];
            this.sensorArr.push(res.data.data);
          }
        })
        .catch(err => {
          this.sensorArr = [];
        });
    },
    // 实时数据
    realTimeData() {
      this.$http
        .get(`/api/threesuns/stat/sensors/weather/current/${this.id}`)
        .then(res => {
          if (res.data.data) {
            this.realTimeNoise = res.data.data.noise;
            this.normal = res.data.data.normal;
            this.pollution = res.data.data.pollution;
            this.realTimeWind = res.data.data.wind;
          } else {
            this.realTimeNoise = {};
            this.normal = {};
            this.pollution = {};
            this.realTimeWind = {};
          }
        });
    },
    // 时间切割
    timeTool(time, num) {
      return time.map((item, index) => {
        return item.time.split(" ")[num];
      });
    },
    // 数据切割
    dataTool(data, detailed) {
      return data.map(item => {
        return item[detailed];
      });
    },
    // 获取时间
    current() {
      var date_start = new Date(); //获取当前时间
      date_start.setDate(date_start.getDate()); //时间戳
      this.CurrentDay = date_start.Format("yyyy-MM-dd") + " " + "00:00:00";
      this.CurrentMont =
        date_start.Format("yyyy-MM") + "-01" + " " + "00:00:00";
      this.SpecificDate = this.CurrentDay;
    },
    // 天气
    weather() {
      this.$http
        .get("/api/threesuns/stat/sensors/weather/realTime/" + this.id)
        .then(res => {
          if (!res.data.data.lives) {
            var weather = res.data.data.lives[0];
            this.realTimeWeather = weather;
          }
        });
    },
    async sensor(id, params) {
      let ID = id || " ";
      return await this.$http.get(
        `/api/threesuns/stat/sensors/weather${ID}`,
        params
      );
    },
    // 定时刷新
    steTime() {
      this.timer = setInterval(() => {
        this.realTimeData();
        this.TemperatureAndHumidityH();
        this.pressure();
        this.wind();
        this.PM();
      }, 300000);
    }
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer);
    }
  }
};
</script>
<style  scoped>
.flex-space-around {
  display: flex;
  justify-content: space-around;
}
.flex-column {
  display: flex;
  flex-direction: column;
}
.flex-between {
  display: flex;
  justify-content: space-between;
}
.Meteorological {
  width: 100%;
  background: #000000;
}
.banner {
  width: 1822px;
  height: 100%;
  margin: auto;
  background: #000000;
}
.headTitle {
  padding-top: 22px;
}
/* 中间 */
.middle {
  margin-top: 25px;
}
.LocationWeather,
.pageBrokenLine,
.pageHistogram {
  margin-top: 12px;
}
.maps {
  width: 520px;
  margin-top: auto;
  height: 517px;
  border: 1px solid #37ccc2;
}
/* 底部 */
.footer {
  margin-top: 30px;
}
.realTime {
  margin-top: 15px;
}
.wind {
  margin-top: 15px;
}
.realTime-box {
  width: 100%;
  justify-content: space-around;
  display: flex;
  align-items: center;
}
.Return {
  width: 30px;
  height: 30px;
  top: 0;
  bottom: 0;
  margin: auto 0;
  position: fixed;
  left: 0px;
  color: aliceblue;
  font-size: 30px;
  z-index: 9999999999999;
}
</style>